<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 请求演示</title>
    <link href="work10_19.css">
    <script src="work10_19.js"></script>
</head>

<body>
    <h2>get 和 post 请求演示</h2>
    <p>点击按钮发送请求，结果将显示在下方区域</p>

    <div class="container">
        <!-- XMLHttpRequest 演示 -->
        <div class="box">
            <h3>XMLHttpRequest</h3>
            <button onclick="xhrGet()">发送 GET 请求</button>
            <button onclick="xhrPost()">发送 POST 请求</button>

            <div class="result" id="xhrResult">等待请求...</div>
        </div>

        <!-- fetch 演示 -->
        <div class="box">
            <h3>fetch</h3>
            <button onclick="fetchGet()">发送 GET 请求</button>
            <button onclick="fetchPost()">发送 POST 请求</button>

            <div class="result" id="fetchResult">等待请求...</div>
        </div>
    </div>
</body>

</html>